<template>
	<div style="padding:0 40px 50px;">
		<div class="table-border" v-show="mercDialog">
			<div class="table-head">{{$t('mer.PendingMerchantApproval')}}</div>
			  	<el-table :data="merAuditDatas" style="width: 100%">
				    <el-table-column type="index" fixed :label="$t('index.Number')" width="70"></el-table-column>
				    <el-table-column prop="name" :label="$t('search.MerchantName')" > </el-table-column>
				    <el-table-column prop="address" :label="$t('mer.MerchantAddress')" ></el-table-column>
				    <el-table-column prop="distributorNumber" :label="$t('search.AgentName')" ></el-table-column>
				    <el-table-column prop="remarks" :label="$t('mer.ApprovalItem')" :formatter="mercState"></el-table-column>
				    <el-table-column fixed="right" :label="$t('index.Operation')" width="150">
				    	<template scope="scope">
				        	<el-button class="blue-btn mini-btn" @click="showMercDetails(scope.row.merchantId,scope.row.remarks)">{{$t('button.Approval')}}</el-button>
				     	</template>
				    </el-table-column>
			  	</el-table>
			<div class="pagination-container">
    			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="obj.page" :page-sizes="[10,20,30,50]" :page-size="obj.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
  			</div>
		</div>
		
		<!--商户详情-->
		<el-form ref="merchantDatas" :model="merchantDatas" v-show="mercAuditDialog">
			<table v-if="this.companyId==='1'" class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
			  	<tbody>
			  		<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.CompanyInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.Merchant')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.name" :disabled="disabled" id="name"/></td>
				  		<td>{{$t('mer.BusinessAddress')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.address" :disabled="disabled" id="address"/></td>
				  		<td>{{$t('mer.MailAddress')}}</td>
				  		<td><input type="text" v-model="merchantDatas.mailingAddress" :disabled="disabled" id="mailingAddress"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.BRNo')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.businessRegistrationNo" :disabled="disabled" id="businessRegistrationNo"/></td>
				  		<td>{{$t('mer.Capital')+currency}}</td>
				  		<td><input type="text" v-model="merchantDatas.registeredCapital" :disabled="disabled" id="registeredCapital"/></td>
				  		<td>{{$t('mer.YearsOfBusiness')}}</td>
				  		<td><input type="text" v-model="merchantDatas.establishmentYear" :disabled="disabled" id="establishmentYear"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.IncorporationCountry')}}</td>
				  		<td><input type="text" v-model="merchantDatas.establishPlace" :disabled="disabled" id="establishPlace"/></td>
				  		<td>{{$t('mer.EmployeeNo')}}</td>
				  		<td><input type="text" v-model="merchantDatas.staffNumber" :disabled="disabled" id="staffNumber"/></td>
				  		<td>{{$t('mer.MerchantType')}}*</td>
				  		<td v-if="disabled"><input type="text" v-model="merchantDatas.merchantsType" :disabled="disabled" id="merchantsType"/></td>
				  		<td v-else>
				  			<el-select :placeholder="$t('placeH.Please')" v-model="merchantDatas.merchantsType" filterable style="line-height: 40px;" id="merchantsType">
			  					<el-option :value="$t('mer.OnlineMerchants')"></el-option>
					    		<el-option :value="$t('mer.UnderLineMerchant')"></el-option>
					    	</el-select>
				  		</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.OwnershipType')}}</td>
				  		<td><input type="text" v-model="merchantDatas.companyType" :disabled="disabled" id="companyType" /></td>
				  		<td>{{$t('mer.Contractperson')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.liaisonPerson" :disabled="disabled" id="liaisonPerson"/></td>
				  		<td>{{$t('mer.Email')}}</td>
				  		<td><input type="text" v-model="merchantDatas.email" :disabled="disabled" id="email"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.Position')}}</td>
				  		<td><input type="text" v-model="merchantDatas.post" :disabled="disabled" id="post"/></td>
				  		<td>{{$t('mer.OfficePhone')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.officeNo" :disabled="disabled" id="officeNo"/></td>
				  		<td>{{$t('mer.Mobile')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.liaisonPhone" :disabled="disabled" id="liaisonPhone"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.Fax')}}</td>
				  		<td><input type="text" v-model="merchantDatas.fax" :disabled="disabled" id="fax"/></td>
				  		<td>{{$t('mer.Director')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.legalPerson" :disabled="disabled" id="legalPerson"/></td>
				  		<td>{{$t('mer.DirectorHKID')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.legalPersonIdNumber" :disabled="disabled" id="legalPersonIdNumber"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.DirectorPassport')}}</td>
				  		<td><input type="text" v-model="merchantDatas.passportNumber" :disabled="disabled" id="passportNumber"/></td>
				  		<td>{{$t('mer.Nationality')}}</td>
				  		<td><input type="text" v-model="merchantDatas.nationality" :disabled="disabled" id="nationality"/></td>
				  		<td>{{$t('search.SubAccountNo')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.no" :disabled="disabled" id="no"/></td>
				  	</tr>
				  	<tr><td colspan="6" style="height: 22px;"></td></tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.ContactInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.URL')}}</td>
				  		<td><input type="text" v-model="merchantDatas.url" :disabled="disabled" id="url"/></td>
				  		<td>{{$t('mer.TargetLaunchDate')}}</td>
				  		<td><input type="text" v-model="merchantDatas.launchDate" :disabled="disabled" id="launchDate"/></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.TechnicalContact')}}</td>
				  		<td><input type="text" v-model="merchantDatas.technical" :disabled="disabled" id="technical"/></td>
				  		<td>{{$t('mer.Email')}}</td>
				  		<td><input type="text" v-model="merchantDatas.technicalEmail" :disabled="disabled" id="technicalEmail"/></td>
				  		<td>{{$t('mer.PhoneNo')}}</td>
				  		<td><input type="text" v-model="merchantDatas.technicalPhone" :disabled="disabled" id="technicalPhone"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.OperationContact')}}</td>
				  		<td><input type="text" v-model="merchantDatas.operation" :disabled="disabled" id="operation"/></td>
				  		<td>{{$t('mer.Email')}}</td>
				  		<td><input type="text" v-model="merchantDatas.operationEmail" :disabled="disabled" id="operationEmail"/></td>
				  		<td>{{$t('mer.PhoneNo')}}</td>
				  		<td><input type="text" v-model="merchantDatas.operationPhone" :disabled="disabled" id="operationPhone"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.FinanceContact')}}</td>
				  		<td><input type="text" v-model="merchantDatas.accountant" :disabled="disabled" id="accountant"/></td>
				  		<td>{{$t('mer.Email')}}</td>
				  		<td><input type="text" v-model="merchantDatas.accountantEmail" :disabled="disabled" id="accountantEmail"/></td>
				  		<td>{{$t('mer.PhoneNo')}}</td>
				  		<td><input type="text" v-model="merchantDatas.accountantPhone" :disabled="disabled" id="accountantPhone"/></td>
				  	</tr>
				  	<tr><td colspan="6" style="height: 22px;"></td></tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.BusinessInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.BusinessNature')}}</td>
				  		<td><input type="text" v-model="merchantDatas.industry" :disabled="disabled" id="industry"/></td>
				  		<td>{{$t('mer.ProductsServices')}}</td>
				  		<td><input type="text" v-model="merchantDatas.profession" :disabled="disabled" id="profession"/></td>
				  		<td>{{$t('mer.TargetCustomers')}}</td>
				  		<td><input type="text" v-model="merchantDatas.targetClient"  id="targetClient"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.provider')}}</td>
				  		<td><input type="text" v-model="merchantDatas.paymentServiceProvider" :disabled="disabled" id="paymentServiceProvider"/></td>
				  		<td>{{$t('mer.Turnover')+currency}}</td>
				  		<td><input type="text" v-model="merchantDatas.turnover" :disabled="disabled" id="turnover"/></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr><td colspan="6" style="height: 22px;"></td></tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.OnlineBusiness')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.DeliveryProvider')}}</td>
				  		<td><input type="text" v-model="merchantDatas.expressSupplier" :disabled="disabled" id="expressSupplier"/></td>
				  		<td>{{$t('mer.CustomerHotline')}}</td>
				  		<td><input type="text" v-model="merchantDatas.serviceHotline" :disabled="disabled" id="serviceHotline"/></td>
				  		<td>{{$t('mer.ReturnRefundPolicy')}}</td>
				  		<td><input type="text" v-model="merchantDatas.isReturnPolicy" :disabled="disabled" id="isReturnPolicy"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.FulfuillmentTime')}}</td>
				  		<td><input type="text" v-model="merchantDatas.cycleTime" :disabled="disabled" id="cycleTime"/></td>
				  		<td>{{$t('mer.ReceiptProvided')}}</td>
				  		<td><input type="text" v-model="merchantDatas.isSignFor" :disabled="disabled" id="isSignFor"/></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.ForecastMonthlySales')}}</td>
				  		<td>
				  			<div class="quarter">{{$t('mer.After3Months')}}：</div>
				  			<input style="width: 60%;float: right;" type="text" v-model="merchantDatas.budgetTurnoverThree" :disabled="disabled" id="budgetTurnoverThree"/>
				  		</td>
				  		<td></td>
				  		<td>
				  			<div class="quarter">{{$t('mer.After6Months')}}：</div>
				  			<input style="width: 60%;float: right;" type="text" v-model="merchantDatas.budgetTurnoverSix" :disabled="disabled" id="budgetTurnoverSix"/>
				  		</td>
				  		<td></td>
				  		<td>
				  			<div class="quarter">{{$t('mer.After1Year')}}：</div>
				  			<input style="width: 60%;float: right;" type="text" v-model="merchantDatas.budgetTurnoverYear" :disabled="disabled" id="budgetTurnoverYear"/>
				  		</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.NoOfTransactions')}}</td>
				  		<td><input type="text" v-model="merchantDatas.monthDealSum" :disabled="disabled" id="monthDealSum"/></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.SalesVolume')+currency}}</td>
				  		<td><input type="text" v-model="merchantDatas.monthOperationRental" :disabled="disabled" id="monthOperationRental"/></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.AvgTransactionAmount')+currency}}</td>
				  		<td><input type="text" v-model="merchantDatas.monthDealAvg" :disabled="disabled" id="monthDealAvg"/></td>
				  		<td>{{$t('mer.MinTransactionAmount')+currency}}</td>
				  		<td><input type="text" v-model="merchantDatas.monthDealMin" :disabled="disabled" id="monthDealMin"/></td>
				  		<td>{{$t('mer.MaxTransactionAmount')+currency}}</td>
				  		<td><input type="text" v-model="merchantDatas.monthDealMax" :disabled="disabled" id="monthDealMax"/></td>
				  	</tr>
				  	<tr><td colspan="6" style="height: 22px;"></td></tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.SettlementInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.AccountName')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.accountName" :disabled="disabled" id="accountName"/></td>
				  		<td>{{$t('mer.AccountNo')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.accountNo" :disabled="disabled" id="accountNo"/></td>
				  		<td>{{$t('mer.BankName')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.bankName" :disabled="disabled" id="bankName"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.BankCode')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.bankCode" :disabled="disabled" id="bankCode"/></td>
				  		<td>{{$t('mer.BranchCode')}}</td>
				  		<td><input type="text" v-model="merchantDatas.branchCode" :disabled="disabled" id="branchCode"/></td>
				  		<td>{{$t('mer.Address')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.bankAddres" :disabled="disabled" id="bankAddres"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.SWIFT')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.swiftCode" :disabled="disabled" id="swiftCode"/></td>
				  		<td>{{$t('mer.ServiceChargeRate')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.fee" :disabled="disabled" id="fee"/></td>
				  		<td>{{$t('mer.ServiceChargeBearer')}}*</td>
				  		<td v-if="disabled"><input type="text" v-model="merchantDatas.chargeType" :disabled="disabled" id="chargeType"/></td>
				  		<td v-else>
				  			<el-select :placeholder="$t('placeH.Please')" v-model="merchantDatas.chargeType" filterable style="line-height: 40px;" id="chargeType">
			  					<el-option :value="$t('button.Merchant')"></el-option>
					    		<el-option :value="$t('mer.Customer')"></el-option>
					    	</el-select>
				  		</td>
				  	</tr>
				  	<tr>
							<td>{{$t('AuMer.SettlementPeriod')+ '(T+)'}}*</td>
				  		<td><input v-model="merchantDatas.setDay" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('search.AgentName')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.distributorNumber" :disabled="disabled" id="distributorId"/></td>
				  		<td>{{$t('search.levelID')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.distributorId" :disabled="disabled" id="distributorNumber"/></td>
				  	</tr>
				  	<tr>
							<td>{{$t('salesman.Salesman')}}</td>
				  		<td><input type="text" v-model="merchantDatas.salesmanName" :disabled="disabled" id="salesmanId"/></td>
				  		<td>{{$t('agent.BDStaffNo')}}</td>
				  		<td><input type="text" v-model="merchantDatas.salesmanNumber" :disabled="disabled" id="salesmanNumber"/></td>
				  		<td>{{$t('agent.commissionRatio')}}</td>
				  		<td><input type="text" v-model="merchantDatas.salesmanProportion" :disabled="disabled" id="salesmanProportion"/></td>
				  	</tr>
				  	<tr><td colspan="6" style="height: 22px;"></td></tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.Attachments')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.BR')}}*</td>
				  		<td>
				  			<img v-if="merchantDatas.businessRegistrationUrl" :src="merchantDatas.businessRegistrationUrl" class="avatar merAuditImg" id="businessRegistrationUrl">
				  		</td>
				  		<td>{{$t('mer.CertOfIncoporation')}}*</td>
				  		<td>
				  			<img v-if="merchantDatas.licenseImageUrl" :src="merchantDatas.licenseImageUrl" class="avatar merAuditImg" id="licenseImageUrl">
				  		</td>
				  		<td>{{$t('mer.DirectorHKID1')}}*</td>
				  		<td>
				  			<img v-if="merchantDatas.identityCardFrontImageUrl" :src="merchantDatas.identityCardFrontImageUrl" class="avatar merAuditImg" id="identityCardFrontImageUrl">
				  		</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.BankStatement')}}*</td>
				  		<td>
				  			<img v-if="merchantDatas.bankCardImageUrl" :src="merchantDatas.bankCardImageUrl" class="avatar merAuditImg" id="bankCardImageUrl">
				  		</td>
							<td>{{$t('mer.Logo')}}</td>
				  		<td>
				  			<img v-if="merchantDatas.logo" :src="merchantDatas.logo" class="avatar merAuditImg" id="bankCardImageUrl">
				  		</td>
							<td></td>
				  		<td></td>
				  	</tr>
						<tr>
							<td>{{$t('mer.Photos')}}*</td>
				  		<td colspan="3">
				  			<ul id="merAuditImgList">
				  				<li v-for='item in merAuditImgList'><img :src="item.src" alt="" /></li>
				  			</ul>
				  		</td>
							<td></td>
				  		<td></td>
						</tr>
			  	</tbody>
			</table>
			<table v-else class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('AuMer.CompanyInfomation')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('AuMer.RegistrationName')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.name" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.AustraliaBusinessNumber')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.businessRegistrationNo" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.BusinessInfomation')}}</td>
							<td><input type="text" v-model="merchantDatas.industry" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('AuMer.ContactNumber')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.officeNo" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.Address')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.address" :disabled="disabled"/></td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('AuMer.City')}}</td>
				  		<td><input type="text" v-model="merchantDatas.bankProvince" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.Postcode')}}</td>
				  		<td><input type="text" v-model="merchantDatas.mailingAddress" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.State')}}</td>
				  		<td><input type="text" v-model="merchantDatas.bankCity" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('AuMer.Website')}}</td>
				  		<td>
				  			<input type="text" v-model="merchantDatas.companyUrl" :disabled="disabled"/>
				  		</td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr height="100px">
				  		<td>{{$t('AuMer.CompanyDescripption')}}</td>
				  		<td colspan="5">
				  			<textarea v-model="merchantDatas.companyProfile" style="height: 100%; width: 100%;padding: none;margin-top: 4px;border: none;" :disabled="disabled">
				  			</textarea>
				  		</td>
				  	</tr>
				  	
					 <tr>
					 	<td colspan="6" style="text-align: left;">
				  			<div class="table-head">{{$t('AuMer.ContactInfomation')}}</div>
				  		</td>
					 </tr> 	
			  		<tr>
			  			<td>{{$t('AuMer.FullNmae')}}*</td>
				  		<td><input v-model="merchantDatas.legalPerson" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.JobTitle')}}</td>
				  		<td><input v-model="merchantDatas.post" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.TelephoneNo')}}*</td>
				  		<td><input v-model="merchantDatas.liaisonPhone" type="text" :disabled="disabled"/></td>
			  		</tr>
				  	<tr>
			  			<td>{{$t('AuMer.EmailAddress')}}*</td>
				  		<td><input v-model="merchantDatas.email" type="text" :disabled="disabled"/></td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  	</tr>
			  		
				  	<tr>
				  		<td colspan="6" style="text-align: left;">
				  			<div class="table-head">{{$t('AuMer.BillingInfomation')}}</div>
				  		</td>
				  	</tr>	
				  	<tr>
			  			<td>{{$t('AuMer.BankName')}}*</td>
				  		<td><input v-model="merchantDatas.bankName" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.CompanyAccountNmae')}}*</td>
				  		<td><input v-model="merchantDatas.accountName" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.BSB')}}*</td>
				  		<td><input v-model="merchantDatas.branchCode" type="text" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('AuMer.AccountNumber')}}*</td>
					  	<td><input v-model="merchantDatas.accountNo" type="text" :disabled="disabled"/></td>
				  	</tr>
			  		
				  	<tr>
				  		<td colspan="6" style="text-align: left;">
				  			<div class="table-head">{{$t('AuMer.OtherInformation')}}</div>
				  		</td>
				  	</tr>
				  	<tr>
			  			<td>{{$t('search.SubAccountNo')}}*</td>
				  		<td><input v-model="merchantDatas.no" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('mer.ServiceChargeBearer')}}*</td>
				  		<td>
				  			<el-select :placeholder="$t('placeH.Please')" v-model="merchantDatas.chargeType" :disabled="disabled" clearable style="line-height: 40px;">
			  					<el-option :value="$t('mer.Customer')"></el-option>
					    		<el-option :value="$t('button.Merchant')"></el-option>
					    	</el-select>
				  		</td>
				  		<td>{{$t('AuMer.Rate')}}*</td>
				  		<td>
				  			<input v-model="merchantDatas.fee" type="text" :disabled="disabled"/>
				  		</td>
				  	</tr>
				  	<tr>
			  			<td>{{$t('AuMer.SettlementPeriod')+ '(T+)'}}*</td>
								<td><input v-model="merchantDatas.setDay" type="text" :disabled="disabled"/></td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.Photos')}}*</td>
				  		<td colspan="3">
				  			<ul class="imgTdUl">
				  				<li>
									<div v-if="merchantDatas.facadeImageUrl" class="imgBox">
			  							<img :src="merchantDatas.facadeImageUrl" class="avatar imgNow">
			  						</div>
					  			</li>
								<li>
									<div v-if="merchantDatas.bankCardImageUrl" class="imgBox">
			  							<img :src="merchantDatas.bankCardImageUrl" class="avatar imgNow">
			  						</div>
								</li>
								<li>
									<div v-if="merchantDatas.identityCardFrontImageUrl" class="imgBox">
			  							<img :src="merchantDatas.identityCardFrontImageUrl" class="avatar imgNow">
			  						</div>
								</li>
								<li>
									<div v-if="merchantDatas.licenseImageUrl" class="imgBox">
			  							<img :src="merchantDatas.licenseImageUrl" class="avatar imgNow">
			  						</div>
								</li>
								<li>
									<div v-if="merchantDatas.businessRegistrationUrl" class="imgBox">
			  							<img :src="merchantDatas.businessRegistrationUrl" class="avatar imgNow">
			  						</div>
								</li>
				  			</ul>
				  		</td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  	</tr>
				</tbody>
			</table>
			<div class="btn-box">
				<el-button  class="blue-btn secondary-btn" @click="auditMercYes(2)">{{$t('cash.reject')}}</el-button>
				<el-button  class="green-btn secondary-btn" @click="auditMercYes(1)">{{$t('button.Approve')}}</el-button>
			</div>
		</el-form>
	</div>
	
</template>

<script>
import {
  viceMerchant,
  MerchantByCheck,
  queryShopAll
} from "api/audit/merAudit/index";

export default {
  name: "merAudit",
  data() {
    return {
      currency: localStorage.getItem("companyId") === "2" ? "(A$)" : "(HK$)",
      merAuditDatas: [],
      res: [],
      obj: {},
      mercDialog: true,
      mercAuditDialog: false,
      disabled: true,
      headers: { "access-token": localStorage.getItem("access-token") },
      merchantDatas: {
        setDay: undefined /*结算周期*/,
        //公司资料
        name: undefined /*商户登记名称*/,
        address: undefined /*登记地址*/,
        mailingAddress: undefined /*邮寄地址*/,
        businessRegistrationNo: undefined /*商业登记号码*/,
        registeredCapital: undefined /*资金总额（HK$）*/,
        establishmentYear: undefined /*成立年数*/,
        establishPlace: undefined /*成立地点*/,
        staffNumber: undefined /*雇员人数*/,
        merchantsType: undefined /*商户类型商户类型(0:线上商户 1：线下商户)*/,
        companyType: undefined /*公司类别*/,
        liaisonPerson: undefined /*联络人*/,
        email: undefined /*邮箱地址*/,
        post: undefined /*职位(0:老板,1:店长,2:店员)*/,
        officeNo: undefined /*办公室电话*/,
        liaisonPhone: undefined /*手机号码*/,
        fax: undefined /*传真号码*/,
        legalPerson: undefined /*董事全名*/,
        legalPersonIdNumber: undefined /*董事身份证号*/,
        passportNumber: undefined /*董事护照号码*/,
        nationality: undefined /*国籍*/,
        no: undefined /*子商户号*/,
        //联络资料
        url: undefined /*网址*/,
        launchDate: undefined /*预定服务推出日期*/,
        technical: undefined /*技术联络人*/,
        technicalEmail: undefined /*邮箱地址（技术）*/,
        technicalPhone: undefined /*联络电话（技术）*/,
        operation: undefined /*运营联络人*/,
        operationEmail: undefined /*邮箱地址（运营）*/,
        operationPhone: undefined /*联络电话（运营）*/,
        accountant: undefined /*会计联络人*/,
        accountantEmail: undefined /*邮箱地址（会计）*/,
        accountantPhone: undefined /*联络电话（会计）*/,
        //技术资料
        profession: undefined /*业务性质*/,
        industry: undefined /*产品/服务类别*/,
        targetClient: undefined /*目标客户*/,
        paymentServiceProvider: undefined /*现在/曾经选用的付款服务供应商/银行*/,
        turnover: undefined /*过去两年营业额（HK$）*/,
        //互联网上提供的业务
        expressSupplier: undefined /*送货快递商或快递供应商*/,
        serviceHotline: undefined /*客户服务热线*/,
        isReturnPolicy: undefined /*是否有退换货政策(0:是1：否)*/,
        cycleTime: undefined /*由收单至送货所需时间*/,
        isSignFor: undefined /*是否签收(0:是1：否)*/,
        budgetTurnoverThree: undefined /*预算每月营业额（三月后*/,
        budgetTurnoverSix: undefined /*预算每月营业额六月后*/,
        budgetTurnoverYear: undefined /*预算每月营业额：一年后：*/,
        monthDealSum: undefined /*每月交易总数*/,
        monthOperationRental: undefined /*每月运营总额*/,
        monthDealAvg: undefined /*每宗交易平均金额*/,
        monthDealMin: undefined /*每宗交易最低金额*/,
        monthDealMax: undefined /*每宗交易最高金额*/,
        //清结算资讯登记
        accountName: undefined /*账户名称*/,
        accountNo: undefined /*账户号*/,
        bankName: undefined /*银行名称*/,
        bankCode: undefined /*银行编号*/,
        branchCode: undefined /*分行号*/,
        bankAddres: undefined /*银行地址*/,
        swiftCode: undefined /*银行国际代码*/,
        fee: undefined /*手续费率*/,
        chargeType: undefined /*手续费承担方/收费类型(0:商户承担,1:用户承*/,
        distributorId: undefined /*所属代理商（传Id）*/,
        distributorNumber: undefined /*代理商编号*/,
        salesmanId: undefined /*业务员*/,
        salesmanNumber: undefined /*业务员编号*/,
        salesmanProportion: undefined /*分成比例*/,
        //附件
        businessRegistrationUrl: undefined /*商业登记副本*/,
        licenseImageUrl: undefined /*公司注册证明副本*/,
        identityCardFrontImageUrl: undefined /*董事身份证副本*/,
        bankCardImageUrl: undefined /*银行月结单副本*/,
        facadeImageUrl: undefined /*公司或店铺相片*/
      },
      mercDataList: [],
      mercOldData: [],
      mercNewData: [],
      mercNewArr: [],
      diffData: [],
      num: 0,
      merAuditImgList: [],
      optionsI: JSON.parse(localStorage.getItem("queryIndustryObj")),
      // industryId: null,
      companyId: localStorage.getItem("companyId")
    };
  },
  created() {
    this.queryShopAllFn(this.obj);
  },
  methods: {
    mercState(row) {
      let remarks = row.remarks;
      if (remarks === "0") {
        return (remarks = this.$t("mer.Registration"));
      } else if (remarks === "1") {
        return (remarks = this.$t("mer.Amendment"));
      }
    },
    //查询商户审核列表接口方法
    queryShopAllFn(value) {
      value.companyId = localStorage.getItem("companyId");
      queryShopAll(value).then(res => {
        this.merAuditDatas = res.value.rows;
        this.res = res.value;
      });
    },
    //点击审核按钮进入商户详情页
    showMercDetails(merchantId, remarks) {
      let mercMsg = {
        merchantId: merchantId,
        remarks: remarks
      };
      this.getMerData(mercMsg);
      this.mercDialog = false;
      this.mercAuditDialog = true;
    },
    //商业登记副本
    handleBusinessSuccess(res) {
      this.merchantDatas.businessRegistrationUrl = res.value;
    },
    //公司注册证明副本
    handleCompanySuccess(res) {
      this.merchantDatas.licenseImageUrl = res.value;
    },
    //董事身份证副本
    handleCopySuccess(res) {
      this.merchantDatas.identityCardFrontImageUrl = res.value;
    },
    //银行月结单相片
    handleMonthlySuccess(res) {
      this.merchantDatas.bankCardImageUrl = res.value;
    },
    //公司或店铺相片
    handleStoreLogoSuccess(res) {
      this.merchantDatas.facadeImageUrl = res.value;
    },
    //根据商户id查询商户信息接口方法
    getMerData(value) {
      MerchantByCheck(value)
        .then(res => {
          this.mercDataList = res.value;
          this.mercOldData = res.value[1];
          this.mercNewData = res.value[0];
          if (res.value.length == 1) {
            this.merchantDatas = this.mercNewData;
          } else {
            this.merchantDatas = this.mercNewData;
            this.mercNewArr = Object.getOwnPropertyNames(this.mercNewData);
            for (let i = 0; i < this.mercNewArr.length; i++) {
              const propName = this.mercNewArr[i];
              if (this.mercNewData[propName] !== this.mercOldData[propName]) {
                this.num++;
                this.diffData[this.num] = document.getElementById(propName);
              }
            }
            for (let j = 0; j < this.diffData.length; j++) {
              if (this.diffData[j] != null) {
                this.diffData[j].style.color = "red";
              }
            }
          }
          if (this.merchantDatas.merchantsType === "Y") {
            this.merchantDatas.merchantsType = this.$t("mer.OnlineMerchants");
          }
          if (this.merchantDatas.merchantsType === "N") {
            this.merchantDatas.merchantsType = this.$t("mer.UnderLineMerchant");
          }

          if (this.merchantDatas.chargeType === "0") {
            this.merchantDatas.chargeType = this.$t("button.Merchant");
          }
          if (this.merchantDatas.chargeType === "1") {
            this.merchantDatas.chargeType = this.$t("mer.Customer");
          }

          if (this.merchantDatas.isReturnPolicy === "0") {
            this.merchantDatas.isReturnPolicy = this.$t("search.YES");
          }
          if (this.merchantDatas.isReturnPolicy === "1") {
            this.merchantDatas.isReturnPolicy = this.$t("search.NO");
          }
          if (this.merchantDatas.isSignFor === "0") {
            this.merchantDatas.isSignFor = this.$t("search.YES");
          }
          if (this.merchantDatas.isSignFor === "1") {
            this.merchantDatas.isSignFor = this.$t("search.NO");
          }
          this.merAuditImgList[0] = {};
          this.merAuditImgList[0].src = this.merchantDatas.facadeImageUrl;
          this.merAuditImgList[1] = {};
          this.merAuditImgList[1].src = this.merchantDatas.facadeImageUrl1;
          this.merAuditImgList[2] = {};
          this.merAuditImgList[2].src = this.merchantDatas.facadeImageUrl2;
          this.merAuditImgList[3] = {};
          this.merAuditImgList[3].src = this.merchantDatas.facadeImageUrl3;
          this.merAuditImgList[4] = {};
          this.merAuditImgList[4].src = this.merchantDatas.facadeImageUrl4;
          for (let i = this.merAuditImgList.length - 1; i >= 0; i--) {
            if (this.merAuditImgList[i].src === undefined) {
              this.merAuditImgList.splice(i, 1);
            }
          }
          // console.log(this.merAuditImgList);
        })
        .catch(error => {
          console.log(error);
        });
    },
    //审核通过/不通过 按钮
    auditMercYes(value) {
      if (this.merchantDatas.merchantsType === this.$t("mer.OnlineMerchants")) {
        this.merchantDatas.merchantsType = "Y";
      }
      if (
        this.merchantDatas.merchantsType === this.$t("mer.UnderLineMerchant")
      ) {
        this.merchantDatas.merchantsType = "N";
      }

      if (this.merchantDatas.chargeType === this.$t("button.Merchant")) {
        this.merchantDatas.chargeType = "0";
      }
      if (this.merchantDatas.chargeType === this.$t("mer.Customer")) {
        this.merchantDatas.chargeType = "1";
      }
      let isReturnPolicy = this.merchantDatas.isReturnPolicy;
      if (isReturnPolicy === this.$t("search.YES")) {
        this.merchantDatas.isReturnPolicy = "0";
      }
      if (isReturnPolicy === this.$t("search.NO")) {
        this.merchantDatas.isReturnPolicy = "1";
      }
      let isSignFor = this.merchantDatas.isSignFor;
      if (isSignFor === this.$t("search.YES")) {
        this.merchantDatas.isSignFor = "0";
      }
      if (isSignFor === this.$t("search.NO")) {
        this.merchantDatas.isSignFor = "1";
      }
      // this.merchantDatas.industry = this.industryId;
      let msg;
      if(this.mercDataList.length === 1){
      	//商户进件申请
      	msg = value === 1 ? this.$t("hint.TheAdditonOf4") : this.$t("hint.TheAdditonOf5");
      }else{
      	//商户信息修改
      	msg = value === 1 ? this.$t("hint.TheAdditonOf1") : this.$t("hint.TheAdditonOf3");
      }
//    let msg = this.mercDataList.length === 1 ? this.$t("hint.TheAdditonOf1") : this.$t("hint.TheMerchantInfoChange");
//    let yes = value === 1 ? this.$t("button.Approve") : this.$t("button.Approve1");
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: msg,
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      })
        .then(() => {
          this.merchantDatas.state = value;
          this.aduitFn(this.merchantDatas, value);
        })
        .catch(() => {
          done();
        });
    },
    //商户审核通过与否接口方法
    aduitFn(state, value) {
      viceMerchant(state).then(res => {
        // console.log(res);
        if (res.code == 0) {
					this.queryShopAllFn(this.obj);
          this.mercAuditDialog = false;
          this.mercDialog = true;
          this.$notify({
            title: this.$t("hint.Alert"),
            message: this.$t("hint.OperationSuccess"),
            type: "success",
            duration: 2000
          });
        } else {
          this.$notify({
            title: this.$t("hint.Alert"),
            message: this.$t("hint.OperationFail"),
            type: "error",
            duration: 2000
          });
        }
      });
    },
    //pageSize 改变时会触发
    handleSizeChange(val) {
      this.obj.pageSize = val;
      this.queryShopAllFn(this.obj);
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.obj.page = val;
      this.queryShopAllFn(this.obj);
    }
  }
};
</script>

<style scoped="scoped">
.el-table::before {
  height: 0;
}
.quarter {
  width: 40%;
  float: left;
  line-height: 40px;
}
.el-upload-list--picture .el-upload-list__item {
  width: 80px;
  float: left;
}
.el-upload-list--picture
  .el-upload-list__item.is-success
  .el-upload-list__item-name {
  display: none;
}
</style>